
<!DOCTYPE html>
<html>
<head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <link rel="stylesheet" href="/static/weui/dist/lib/weui.min.css">
    <link rel="stylesheet" href="/static/weui/dist/css/jquery-weui.css">
    <link rel="stylesheet" href="/static/weui/dist/lib/demos.css">
</head>
<body ontouchstart>
<header class='demos-header'>
    <h1 class="demos-title">滑动删除</h1>
</header>
<div class="bd">
    <div class="page__bd">
        <div class="weui-cells">
            <div class="weui-cell weui-cell_swiped" id="swipe1">
                <div class="weui-cell__bd">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>左滑列表</p>
                        </div>
                        <div class="weui-cell__ft">向左滑动试试</div>
                    </div>
                </div>
                <div class="weui-cell__ft">
                    <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
                    <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
                </div>
            </div>
            <div class="weui-cell weui-cell_swiped">
                <div class="weui-cell__bd">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p>左滑列表</p>
                        </div>
                        <div class="weui-cell__ft">向左滑动试试</div>
                    </div>
                </div>
                <div class="weui-cell__ft">
                    <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
                </div>
            </div>
            <div class="weui-cell weui-cell_swiped">
                <div class="weui-cell__bd">
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                        <div class="weui-cell__bd">
                            <p>左滑列表</p>
                        </div>
                        <div class="weui-cell__ft">向左滑动试试</div>
                    </div>
                </div>
                <div class="weui-cell__ft">
                    <a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">取消关注</a>
                </div>
            </div>
        </div>
        <div class="button_sp_area" style="text-align: center;">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" id="open">打开第一个</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" id="close">关闭第一个</a>
        </div>
    </div>
</div>
<script src="/static/weui/dist/lib/jquery-2.1.4.js"></script>
<script src="/static/weui/dist/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script src="/static/weui/dist/js/jquery-weui.js"></script>


<script>
    $('.delete-swipeout').click(function () {
        $(this).parents('.weui-cell').remove()
    })
    $('.close-swipeout').click(function () {
        $(this).parents('.weui-cell').swipeout('close')
    })
    $("#open").click( function () { $("#swipe1").swipeout('open') })
    $("#close").click( function () { $("#swipe1").swipeout('close') })
    $("#swipe1").click( function () { console.log('click') })
</script>
</body>
</html>
